<template>
  <div>
    <ul style="list-style-type: none;display: inline-block;">
      <li>
        <div id="circleChart" style="height: 350px;width: 350px;"></div>
      </li>
      <li>
        <div id="barChart" style="height: 350px;width: 350px;"></div>
      </li>
    </ul>


  </div>
</template>
<script>
import * as echarts from "echarts"
// Vue.prototype.$echarts = echarts //设置全局
export default {
  name: "testChar",
  data() {
    return {

    }
  },
  created() {},
  mounted() {
    this.circleEchartsInit();
    this.barChartInit();
  },
  methods: {
    circleEchartsInit() {
      // 初始化实例
      const myCircleChart = echarts.init(document.getElementById('circleChart'));
      // 配置项
      const option = {
        title: {
          text: 'Referer of a Website',
          subtext: '作者',
          left: 'center'
        },
        //鼠标滑过是否显示悬浮框 （默认为true开启 false为关闭）
        tooltip: {trigger: 'item'},
        legend: {
          bottom: 10,
          left: 'center',
          // orient: 'vertical',//图例的排列方式 （默认 horizontal：水平方向排列 vertical：垂直方向排列）
          // right: 'right',//图标在前文字在后，图例靠右居中显示 （也可以是: left || center || right || 百分比：xx% || xx(默认单位px)  ）
        },
        // xAxis: {type: 'category'},
        // yAxis: {},
        series: [{
          name: '圆饼',
          type: 'pie',    // 设置图表类型为饼图
          radius: '50%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
          data:[
            {value:235, name:'视频广告'},
            {value:274, name:'联盟广告'},
            {value:310, name:'邮件营销'},
            {value:335, name:'直接访问'},
            {value:400, name:'搜索引擎'}
          ],
          label: {
            normal: {
              show: true,
              //formatter: '{b}: {d}%',  // 使用 {d}% 来显示百分比，确保不会省略
              position: 'inside',  // outside, center,inside 等其他位置
              //rotate: 90  // 旋转标签，使其更易读
              textStyle: {
                fontWeight: 200,
                fontSize: 10 //文字的字体大小
              }

            }
          },
          // 高亮样式。
          emphasis: {
            itemStyle: {
                // 高亮时点的颜色
                color: 'red'
            },
            label: {
              show: true,
                // 高亮时标签的文字
                // formatter: '高亮时显示的标签内容'
            }
          },

        }]
      };
      // 应用配置
      myCircleChart.setOption(option);
      // 响应式处理
      // window.addEventListener("resize", () => {
      //   myCircleChart.resize()
      // });
      const resizeHandler = () => myCircleChart.resize();
      window.addEventListener("resize", resizeHandler);

      // 组件销毁时移除监听
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("resize", resizeHandler);
        myCircleChart.dispose();
      });
    },
    barChartInit() {
      // 初始化实例
      const myBarChart = echarts.init(document.getElementById('barChart'));
      // 配置项
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: 'x指标',
          nameLocation: 'center',//start/middle/center/end
          position: 'bottom',//top/bottom
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            //show: true,
            textStyle: {
              color: 'red'
            },
            interval:0,  //解决echarts数值因文字较多显示不全问题
            rotate:15 //x 文字显示旋转45度
          },
          // min: 60,
          // axisLine: {
          //   show: true, //是否显示坐标轴线
          //   symbol: ['none','arrow'],
          //   symbolSize: [10,15]
          // },

        },
        axisLabel:{
          fontSize: 100,  //控制字体大小
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true, //是否显示坐标轴线
          },
          splitLine: {
            show: true, // 显示分割线
            lineStyle: {
              color: '#999', // 分割线的颜色
              type: 'dashed', // 分割线的类型，'dashed'为虚线
              width: 1 // 分割线的宽度
            }
          }
        },
        series: [
          {
            data: [120, {value:200,itemStyle:{color:'#a90000'}}, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '60%',
            label: {
              show: true, // 显示数值
              position: 'inside' // 设置显示位置为柱状图内部
            }
          }
        ]
      };

      // 应用配置
      myBarChart.setOption(option);
      // 响应式处理
      // window.addEventListener("resize", () => {
      //   myCircleChart.resize()
      // });
      const resizeHandler = () => myCircleChart.resize();
      window.addEventListener("resize", resizeHandler);

      // 组件销毁时移除监听
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("resize", resizeHandler);
        myBarChart.dispose();
      });
    },
  }
}
</script>
<style scoped>
ul li {
  float: left;
}
</style>